<template>
  <div v-if="users.length > 0">
    <van-card v-for="user in users"
              :price="user.planetCode"
              :desc="user.personalProfile"
              :title="`${user.username}<${user.planetCode}>`"
              :thumb="user.avatarUrl"
              currency="⭐️"
              :tag="user.gender === 0 ? '♂' : ' ♀ '"
    >
      <template #tags>
        <van-tag  type="success" plain v-for="tag in user.tags" style="margin-right: 8px;margin-top: 4px">
          {{tag}}
        </van-tag>
      </template>
      <template #footer>
        <van-button size="mini" @click="toUserInfo(user)">联系我</van-button>
      </template>
    </van-card>
  </div>

  <van-empty image="search" description="暂无用户" v-if="isHaveMatch" />
  <van-loading  vertical v-if="matchIng">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>
</template>


<script setup lang="ts">
import {searchStore} from "../stores/search/search.ts";
import {onMounted, ref} from "vue";
import {selectUsersByIds} from "../api/userApi.ts";
import {userStore} from "../stores/user/user.ts";
import {useRouter} from "vue-router";

const searchStoreApi = searchStore();
const ids = ref([]);
const users = ref([]);
const isHaveMatch = ref(false);
const matchIng = ref(true);

onMounted(async () => {
  const searchTipData = await searchStoreApi.getSearchTipData();
  console.log('searchTipData',searchTipData);
  if (!searchTipData || searchTipData.length !== 0){
    ids.value = searchTipData.map((item) => (item.id));
    console.log('ids',ids.value);
  }
  //根据ids查询用户信息
  const res = await selectUsersByIds(ids.value);
  if (res.code === 200){
    if (res.data.length > 0){
      users.value = res.data;
      users.value.forEach(user =>{
        if (user.tags){
          user.tags = JSON.parse(user.tags);
        }
      });
    }else {
      isHaveMatch.value = true;
    }
  }
  matchIng.value = false;

});

const userStoreAPI = userStore();
const router = useRouter();
//前往用戶信息页面
const toUserInfo = (user:any)=>{
  userStoreAPI.setOtherUserInfo(user);
  router.push('/userInfo');
};



</script>


<style scoped>

</style>